<template>
  <div class="vertical-table">
    <div class="table-col col-header" :style="{width: labelWidth + 'px', flex: labelWidth ? 'none' : 1}">
      <div class="title">
        标题
        <span style="margin-left: 90px">{{page == '1/0' ? '1/1' : page}}</span>
      </div>
      <div class="label item" v-for="(label, index) in labels" :key="index" :style="{backgroundColor: label.dark ? '#F8F8F8' : '', borderRight: label.dark ? 0 : '', fontWeight: label.bold ? 500 : 400}" :title="label.name || ''">
        <span :style="{color: label.color || ''}">{{label.name || ''}}</span>
      </div>
      <div class="last-page" @click="$emit('lastpage')"></div>
    </div>
    <div class="table-body" ref="body" @mousedown="handleStart" @mousemove="handleMove">
      <div class="table-col" v-for="(item, index) in coldata" :key="index">
        <div class="title" v-if="!item.header">
        </div>
        <div class="title" v-else>
          {{item.header.text}}
          <span class="op" v-if="!!item.header.opText" @click="item.header.opEvent && $emit(item.header.opEvent, item)">
            {{item.header.opText}}
          </span>
        </div>
        <div class="item" v-for="(label, index) in labels" :key="index" :style="{backgroundColor: label.dark ? '#F8F8F8' : '', borderLeft: label.dark ? '0' : ''}">
          <span v-if="!item.data"></span>
          <span v-else-if="Object.prototype.toString.call(item.data[label.label]) == '[object Object]'" @click="item.data[label.label].event && $emit(item.data[label.label].event, item)" :style="{color: item.data[label.label].color}">
            <a v-if="label.label && item.data[label.label].download" :href="item.data[label.label].download" :download="label.label ? item.data[label.label].text || '' : ''">
              {{label.label ? item.data[label.label].text || '' : ''}}
            </a>
            <span v-else>{{label.label ? item.data[label.label].text || '' : ''}}</span>
          </span>
          <span v-else>
            {{
            label.label
            ? typeof item.data[label.label] == 'number'
              ? formateMoney(item.data[label.label])
              : item.data[label.label] || ''
            : ''
            }}
          </span>
        </div>
      </div>
    </div>
    <div class="table-col col-footer">
      <div class="title" style="padding-right: 0;">
        <div class="next-page" @click="$emit('nextpage')"></div>
      </div>
      <div class="item" v-for="(label, index) in labels" :key="index" :style="{backgroundColor: label.dark ? '#F8F8F8' : '#ffffff', borderLeft: label.dark ? '0' : '', paddingRight: 0}"></div>
    </div>
  </div>
</template>

<script>
import { formateMoney } from '../../common.js'

export default {
  props: {
    labelWidth: {
      type: Number,
      default: 300
    },
    labels: {
      type: Array,
      default: () => []
    },
    coldata: {
      type: Array,
      default: () => []
    },
    page: {
      type: String,
      default: '1/1'
    }
  },
  data() {
    return {
      started: false
    }
  },
  methods: {
    handleLastPage() {
      this.$emit("lastPage")
    },
    handleNextPage() {
      this.$emit("nextPage")
    },
    handleOp(item) {
      item.header.opEvent && this.$emit(item.header.opEvent, item)
    },
    handleStart(e) {
      this.started = true
    },
    handleMove(e) {
      if (this.started) {
        this.$refs.body.scrollLeft -= e.movementX
      }
    },
    handleEnd(e) {
      if (this.started) {
        this.started = false
      }
    },
    formateMoney
  },
  created() {
    window.addEventListener('mouseup', this.handleEnd)
  },
  destroyed() {
    window.removeEventListener('mouseup', this.handleEnd)
  }
}
</script>

<style scoped>
a {
  color: inherit;
}

.vertical-table {
  position: relative;
  display: flex;
  background-color: #ffffff;
  border-top: 0px;
  border-left: 0px;
  border-right: 1px;
  border-bottom: 1px;
  border-style: solid;
  border-color: #e1e1e1;
}

.table-body>.table-col {
  /* width: 250px;
  flex: none; */
  flex: 1;
}

.table-body>div:nth-child(1) .item,
.table-body>div:nth-child(1) .title {
  border-left: 0;
}

.table-body {
  overflow-x: scroll;
  flex: 1;
  display: flex;
  user-select: none;
}

.table-body:active {
  opacity: 0.8;
}

.col-footer {
  width: 44px;
}

.item,
.title {
  height: 40px;
  line-height: 40px;
  border: 1px solid #f2f2f2;
  color: #323232;
  font-size: 14px;
  padding-left: 30px;
  padding-right: 30px;
  border-right: 0px;
  /* border-left: 0px; */
  border-bottom: 0px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item {
  text-align: right;
}

.title {
  position: relative;
  background-color: rgb(237, 112, 24);
  color: #ffffff;
}

.title>.op {
  position: absolute;
  top: 10px;
  right: 20px;
  line-height: 17px;
  color: #ffffff;
  cursor: pointer;
  text-decoration-color: #ffffff;
  text-decoration-style: dashed;
}

.title>.op::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background-color: #ffffff;
}

.table-col.col-header {
  position: relative;
}

.table-col.col-header .item,
.table-col.col-header .title {
  border-right: 1px solid #f2f2f2;
}

.vertical-table>.table-col:last-child .title {
  position: relative;
}

.last-page,
.next-page {
  position: absolute;
  top: 15px;
  width: 0;
  height: 0;
  border: 6px solid #ffffff;
  border-left-color: transparent;
  border-bottom-color: transparent;
  cursor: pointer;
}

.last-page {
  right: 10px;
  transform: rotateZ(-135deg);
}

.next-page {
  right: 20px;
  transform: rotateZ(45deg);
}

.next-page:hover,
.last-page:hover {
  border-top-color: #f2f2f2;
  border-right-color: #f2f2f2;
}
</style>
